.project-detail-side {

    .project-aside {
        height: 100%;
        display: flex;
        flex-direction: column;
        ul {
            padding: 0;
            margin: 0;
        }

        .project-menu {
            list-style-type: none;
            cursor: pointer;
            flex: 1;

            .project-back-project {
                margin-bottom: 10px;
            border-bottom: 1px solid #d7d7d7;
            }

            .project-menu-submenu {
                height: 40px;
                display: flex;
                line-height: 40px;
                width: 100%;
                align-items: center;
                padding-left: 15px;
                cursor: pointer;
                gap: 8px;
                border-left: 3px solid transparent;
                i {
                    margin-right: 10px;
                }
            }

            .project-menu-submenu-icon {
                display: flex;
                width: 100%;
                align-items: center;
                flex-direction: column;
                margin-bottom: 10px;
                padding: 5px 0;
                cursor: pointer;
                border-left: 3px solid transparent;
                .project-aside-icon {
                    width: 15px;
                    height: 15px;
                }
            }


        }

        .hidden-menu {
            display: none;
        }

        .project-expend {
            position: absolute;
            right: -5px;
            width: 10px;
            height: 50px;
            border-radius: 20px;
            top: 50%;
            line-height: 20px;
            display: none;
            z-index: 2;
            background: var(--tiklab-gray-400);
            .project-expend-icon {
                width: 10px;
                height: 50px;

            }
        }
    }

    .project-aside:hover {
        .project-expend {
            display: block;
        }
    }
}
.project-sider-blue {
    background-color: #2f5eb1 !important;
    color: #fff !important;

    .project-menu-submenu-icon:hover {
        background-color: #557ac0;
    }

    .project-menu-submenu:hover {
        background-color: #557ac0;
    }

    .project-menu-select {
        color: #fff;
        background-color: #557ac0;
        border-left: 3px solid #fff !important;
    }
    .project-text  {
        color: #fff;
        .type {
            color: #fff;
        }
    }
    .project-setting:hover {
        background-color: #557ac0;
    }


}

.project-sider-gray {
    background-color: #f0f3fa !important;
    .project-menu-submenu-icon:hover {
        background-color: var(--tiklab-gray-400);
    }

    .project-menu-submenu:hover {
        background-color: var(--tiklab-gray-400);
    }

    .project-menu-select {
        background-color: var(--tiklab-gray-400);
        border-left: 3px solid var(--tiklab-blue) !important;
    }

    .project-setting:hover {
        background-color: var(--tiklab-gray-400);
    }
    .project-text  {
        .type {
            color: #666;
        }
    }
}
.project-sider-black {
    background-color: #131d30 !important;
    color: #fff !important;
    .project-menu-submenu-icon:hover {
        background-color: #414a5a;
    }

    .project-menu-submenu:hover {
        background-color:  #414a5a;
    }

    .project-menu-select {
        background-color:  #414a5a;
        border-left: 3px solid #fff !important;
    }
    .project-text  {
        color: #fff;
        .type {
            color: #fff;
        }
    }

    .project-setting:hover {
        background-color: #414a5a;
    }
}

.menu-box-right-border{
    width: 15px;
    position: absolute;
    top: 0;
    right: -5px;
    height: 100%;

    .menu-box-isexpanded{
        color: #5e5e5e;
        position: absolute;
        top: 80%;
        right: -3px;
        transform: translateY(-50%);
        background: #ebebeb;
        border-radius: 5px;
        padding: 10px 0;
        cursor: pointer;
        border: 1px solid #d4dde8;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s, right 0.3s;
        z-index: 100;
    }
    .first-menu-expend-icon {
        width: 10px;
        height: 50px;
    }
    &:hover .menu-box-isexpanded {
        right: -3px;
        opacity: 1;
        visibility: visible;
    }
}
